<template>
  <div class="page">
    <m-header :title="langText&&langText.myassets" :canback="Boolean(1)"></m-header>
    <div class="body">
      <div class="sm_top">
        <p>{{langText&&langText.fcnum}}：{{ (+fc).toFixed(2) }}</p>
        <p>{{langText&&langText.usdtnum}}：{{ (+usdt).toFixed(2) }}</p>
        <!-- <p>{{langText&&langText.lockfcnum}}：{{ (lock_fc+sf_lock_fc).toFixed(2) }}</p> -->
        <p>{{langText&&langText.lockfcnum}}：{{ ((+lock_fc)+(+sf_lock_fc)).toFixed(2)}}</p>
        <p>
          <span class="right" @click="$router.push({name:'AssetsDetails'})">{{langText&&langText.assetbreakdown}}</span>
        </p>
      </div>

      <button class="btn-submit btn-origin bot-btn" @click="$router.push({name:'Full'})">{{langText&&langText.recharge}}</button>
      <button class="btn-submit btn-origin bot-btn" @click="$router.push({name:'Withdraw'})">{{langText&&langText.withdraw}}</button>
    </div>
  </div>
</template>
<script>
import navItem from "@/components/order-nav-item.vue";
import { Owner } from "@/server/server.js";
import { Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
import { MyTxt } from "@/assets/commonjs/lan.js";
export default {
  data() {
    return {
      allTxt:null,
      fc:null,
      langText:null,
      usdt:null,
      sf_lock_fc:null,
      lock_fc:null
    };
  },
  computed: {
    ...mapGetters(["lang",'getLangId'])
  },
  created() {
    
  },
  mounted() {
    this.myAssets();
    this.initData();
  },
  methods: {
    initData(){
      this.allTxt = Object.assign({},MyTxt)
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
      console.log(this.langText)
    },
    myAssets(){
      Owner.myAssets().then(res=>{
        if(res.code==1){
          this.fc = res.data.fc;
          this.usdt = res.data.usdt;
          this.lock_fc = res.data.lock_fc;
          this.sf_lock_fc = res.data.sf_lock_fc;
        }else{
          mui.toast(res.msg)
        }
      })
    },
  },
  components: {
    navItem
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  //   padding: @margin-primary;
  background-color: @bg-color;
  .sm_top{
    width: 100%;
    height: 300px;
    background-color: #4EB6AD;
    padding: 40px 30px;
    position: relative;
    p{
      font-size:28px;
      font-weight:400;
      color:rgba(255,255,255,1);
      margin-top: 20px;
      &:first-child{ margin-top: 0 }
    }
    .right{
      font-size:28px;
      font-weight:400;
      color:rgba(255,255,255,1);
      border: 1px solid #fff;
      border-radius:10px;
      padding: 5px 15px;
      // position: absolute;
      // right: 60px;
      // top: 60px;
    }
  }
  .bot-btn{
    width: 710px;
    margin-left: 20px;
    height: 88px;
    line-height: 88px;
    margin-top: 30px;
    &:last-child{ background-color: #8498E3; }
    border-radius: 10px;

    color: #fff;
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>